<template>
    <div class="element">
        <div class="menu-title" v-bind:class="{titleC:sel(cRouter)}" @click="MenuClick">
            <div style="margin-left: 20px">
                <img :src="icon" width="16px"/>
            </div>
            <div style="margin-left: 10px;">
                {{ title }}
            </div>
            <div class="closeBox" v-bind:class="{rotate:expand1(cRouter)}"><i class="el-icon-arrow-down"></i></div>
        </div>
        <el-collapse-transition>
            <div v-show="expand1(cRouter)">
                <div style="background-color: rgba(65,115,Business Department E,0.75);padding-left: 15px">
                    <MenuItem :roles="roles[index]" :key="index" v-for="(item,index) in subMenu" :c-router="cRouter"
                              :route="item.route"/>
                </div>

            </div>
        </el-collapse-transition>
    </div>
</template>

<script>
import MenuItem from "@/components/NPMSMenu/MenuItem";

export default {
    name: "ExpandMenu",
    props: ['title', 'subMenu', 'cRouter', 'icon'],
    components: {MenuItem},
    data() {
        return {
            clicked: false,
            expand: false,
            temp: '',
            roles: [
                [
                    this.$npms.roles.ADMIN,
                    this.$npms.roles.MARKET_SP,
                    this.$npms.roles.MARKET_MGR,
                    this.$npms.roles.MARKET_SUB_MGR,
                ],
                [
                    this.$npms.roles.ADMIN,
                    this.$npms.roles.MARKET_MGR,
                    this.$npms.roles.MARKET_SUB_MGR,

                ],
                [
                    this.$npms.roles.ADMIN,
                    this.$npms.roles.MARKET_MGR,
                    this.$npms.roles.MARKET_SP,
                    this.$npms.roles.MARKET_SUB_MGR,

                ]
            ],

        }
    },
    mounted() {

    },
    methods: {
        getRole(index) {

        },
        MenuClick() {
            this.clicked = !this.clicked
            this.expand = !this.expand
        },
        expand1(ro) {
            if (ro === this.temp) {
                //已经访问页面，直接更新expend
                return this.expand
            } else {
                //发生了页面跳转
                //重新更新expand
                var r = false
                this.subMenu.forEach(i => {
                    if (i.route.router === ro) {
                        r = true
                    }
                })
                this.temp = ro;
                this.expand = r;
                this.clicked = false;
                return r
            }

        },
        sel(ro) {
            //如果有路由则一直高亮，否则根据click
            var r = false
            this.subMenu.forEach(i => {
                if (i.route.router === ro) {
                    r = true
                }
            })
            if (r === true) {
                return r;
            }
            return this.clicked
        }

    },
}
</script>

<style scoped>
.element {
    margin-top: 10px;
}

.menu-title {
    width: 200px;
    display: flex;
    flex-direction: row;
    height: 50px;
    align-items: center;
    justify-content: flex-start;
    border-radius: 30px;
    font-size: 14px;

    margin-left: 15px;
    color: white;
    transition: all 500ms;
    cursor: pointer;
}

.titleC {
    background-color: #4196F4;
}

.menu-title:hover {
    background-color: #4196F4;
}

.closeBox {

    line-height: 50px;
    height: 50px;
    margin-left: 10px;
    transition: transform 0.5s;
    -moz-transition: -moz-transform 0.5s; /* Firefox 4 */
    -webkit-transition: -webkit-transform 0.5s; /* Safari 和 Chrome */
    -o-transition: -o-transform 0.5s;
    transform: rotate(-90deg);
}

.rotate {
    transform: rotate(0deg);
}


.box {
    background: orange;
}
</style>